<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{padding: 0; margin: 0; list-style: none;}
    .cont{width: 800px; height: 800px; background: #000;}
    .tab {width: 800px; height: 40px; line-height: 40px; display: flex;}
    .tab .t1{ color: #fff; margin: 0 15px; cursor: pointer;}
    .content{ width: 800px; height: calc(100% - 40px); background-color: #eee; overflow: hidden;}
    .ci{background-color: #eee;display: flex; flex-direction: row; flex-wrap: nowrap; height: 800px; width: auto; transition: all 1s;}
    .content .content1{ width: 800px; height: 100%; flex: none; transition: all 1s; color: blue;}
    .activees{ transform: translateX(0);}
</style>
<body>
     <div class="cont">
           <div class="tab">
               <div class="t1 active">1</div>
               <div class="t1">2</div>
               <div class="t1">3</div>
           </div>
           <div class="content">
               <div class="ci">
                    <div class="content1 activees" style="background-color: red;">1</div>
                    <div class="content1" style="background-color: rgb(0, 255, 42);">2</div>
                    <div class="content1" style="background-color: rgb(0, 162, 255);">3</div>
               </div>
           </div>
     </div>
     <script>
        let t1 = document.querySelectorAll('.t1');
        let content1 = document.querySelectorAll('.content1');
        let activees = document.querySelector('.ci');
        for(let i= 0; i <t1.length; i++){
            t1[i].index = i;
            console.log(t1[i].index);
            t1[i].onclick = function(){
                for(var j = 0; j < t1.length; j++){
                    t1[j].className='t1';
                    content1[j].className = 'content1';
                }
                this.className = 't1 active';
                content1[this.index].className = 'content1 activees';
                activees.style='transform: translateX(-'+(this.index * 800)+'px)';
            }
        }
        
     </script>
</body>
</html>